// uno.config.ts
import type { Theme } from 'unocss/preset-uno'
import { defineConfig, presetUno, presetAttributify, presetTypography } from 'unocss'
import { presetAnimations } from 'unocss-preset-animations'
import presetLegacyCompat from '@unocss/preset-legacy-compat'
import presetIcons from '@unocss/preset-icons'
export default defineConfig<Theme>({
  // 内容扫描配置
  content: {
    pipeline: {
      include: [
        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
        'src/**/*.{js,ts}',
      ],
    },
  },

  // 预设配置
  presets: [
    presetUno(),                    // 基础工具类
    presetAttributify(),            // 属性化模式支持
    presetTypography(),             // 排版支持
    presetAnimations(),             // 🎬 动画预设
    presetLegacyCompat({            // 🛡️ 兼容性支持
      legacyColorSpace: true,
    }),
    presetIcons({
      scale: 1.2,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
      collections: {
        // 使用 Iconify 图标
        carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
        mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default),
        'heroicons-solid': () => import('@iconify-json/heroicons-solid/icons.json').then(i => i.default),
        uim: () => import('@iconify-json/uim/icons.json').then(i => i.default),
      },
    }),
  ],

  // 自定义快捷方式
  shortcuts: [
    ['btn', 'px-4 py-2 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
    ['btn-secondary', 'px-4 py-2 rounded inline-block bg-gray-200 text-gray-900 cursor-pointer hover:bg-gray-300 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
  ],

  // 主题配置
  theme: {
    colors: {
      primary: '#007bff',
      secondary: '#6c757d',
      success: '#28a745',
      danger: '#dc3545',
      warning: '#ffc107',
      info: '#17a2b8',
    },
  },

  // 规则配置
  rules: [
    [/^m-(\d+)$/, ([, d]) => ({ margin: `${d}px` })],
    [/^p-(\d+)$/, ([, d]) => ({ padding: `${d}px` })],
  ],
})